<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>校园二手交易平台</title>
    <head th:include="includes :: header"></head>
</head>
<body>
    <div id="app">
        <div style="height: 50px;width: 100%;background-color: #b3d4fd;line-height: 50px;padding-left: 20px">
            <a href="/index">校园二手交易平台(点击进入主系统)</a>
        </div>
        <div style="height: auto;width: 80%;float: left" >
            <div style="width: 20%;height: 160px;float: left;margin: 10px" v-for="item in shopList">
                <div style="height: 100px;width: 100%">
                    <img :src="'http://file.mykefang.com'+item.faceImg" alt="" style="width: 100%;height: 100px">
                </div>
                <div style="width: 100%;height: 30px;font-size: 14px">
                    <span>{{item.name}}</span><span style="font-size: 18px;color: red;margin-left: 20px">{{item.price}}</span>
                </div>
                <div style="width: 100%;height: 30px">
                    <a style="font-size: 12px" v-on:click="car(item.id,item.name)">加入购物车</a>
                    <a style="font-size: 12px" v-on:click="collection(item.id,item.name)">收藏</a>
                    <a style="font-size: 12px;color: red"  v-on:click="buy(item.id,item.name,item.price)">购买</a>
                    <a style="font-size: 12px;color: blue" v-on:click="say(item.id,item.name)">评论</a>
                    <a style="font-size: 12px;color: blue" v-on:click="sayShop(item.id,item.name)">留言</a>
                </div>
            </div>
        </div>
        <div style="height: auto;width: 18%;float: left" >
            <h2>广告位</h2>
            <div style="width: 100%;height: 50px" v-for="item in adverList">
                <a :href="item.url" target="_blank">
                    <img :src="'http://file.mykefang.com'+item.faceImg" style="height: 50px;width: 100%" alt="">
                </a>
            </div>
        </div>
    </div>
</body>
<div th:include="includes :: footer"></div>
<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    var ve = new Vue({
        el: '#app',
        data: {
            shopList: [],
            colCarForm:{
                shopId:'',
                shopName:'',
                type:'',
            },
            adverList:[],
            buyForm:{
                shopId:'',
                shopName:'',
                price:'',
            },
            sayForm:{
                shopId:'',
                shopName:'',
                content:'',
            },
        },
        created:function(){
            this.getList();
            this.getAdverList();
        },
        mounted:{

        },
        methods:{
            getList:function(){
                axios.get('/shop/shopListAll').then(function (res) {
                    this.shopList =res.data;
                }.bind(this)).catch(function (error) {
                    console.log(error);
                });
            },
            car:function(id,name){
                this.colCarForm.shopId = id;
                this.colCarForm.shopName = name;
                this.colCarForm.type = 1;
                axios({
                    url: '/shopColCar/saveColCar',
                    method: 'POST',
                    data:this.colCarForm
                }).then(function (response) {
                    layer.msg("操作成功", {icon: 1, time: 3000});
                }.bind(this)).catch(function (error) {
                    console.log(error);
                });
            },
            collection:function(id,name){
                this.colCarForm.shopId = id;
                this.colCarForm.shopName = name;
                this.colCarForm.type = 0;
                axios({
                    url: '/shopComment/saveComment',
                    method: 'POST',
                    data:this.colCarForm
                }).then(function (response) {
                    layer.msg("操作成功", {icon: 1, time: 3000});
                }.bind(this)).catch(function (error) {
                    console.log(error);
                });
            },
            buy:function(id,name,price){
                var that = this;
                layer.confirm('确认要购买该商品吗？', function (index) {
                    that.buyForm.shopId = id;
                    that.buyForm.shopName = name;
                    that.buyForm.price = price;
                    axios({
                        url: '/buy/save',
                        method: 'POST',
                        data: that.buyForm
                    }).then(function (response) {
                        layer.msg("购买成功", {icon: 1, time: 3000});
                    }.bind(this)).catch(function (error) {
                        console.log(error);
                    });
                });
            },
            getAdverList:function(){
                axios.get('/adver/listAlls').then(function (res) {
                    this.adverList =res.data;
                }.bind(this)).catch(function (error) {
                    console.log(error);
                });
            },
            say:function(id,name){
                var that = this;
                layer.prompt({title: '请输入你的评论', formType: 2}, function(text, index){
                    layer.close(index);
                    that.sayForm.shopId = id;
                    that.sayForm.shopName = name;
                    that.sayForm.content = text;
                    that.sayForm.type = '0';
                    axios({
                        url: '/shopComment/saveComment',
                        method: 'POST',
                        data: that.sayForm
                    }).then(function (response) {
                        layer.msg("评论成功", {icon: 1, time: 3000});
                    }.bind(this)).catch(function (error) {
                        console.log(error);
                    });
                });
            },
            sayShop:function(id,name){
                var that = this;
                layer.prompt({title: '请输入你的留言', formType: 2}, function(text, index){
                    layer.close(index);
                    that.sayForm.shopId = id;
                    that.sayForm.shopName = name;
                    that.sayForm.content = text;
                    that.sayForm.type = '1';
                    axios({
                        url: '/shopComment/saveComment',
                        method: 'POST',
                        data: that.sayForm
                    }).then(function (response) {
                        layer.msg("留言成功", {icon: 1, time: 3000});
                    }.bind(this)).catch(function (error) {
                        console.log(error);
                    });
                });
            }
        }
    })

</script>
</html>